<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-发ajax请求</title>
</head>

<body>
    <button id="getBtn">GET AJAX</button>
    <button id="postBtn">POST AJAX</button>
    <button id="putBtn">PUT AJAX</button>
    <button id="deleteBtn">Delete AJAX</button>
</body>

<script>
    const getBtn = document.querySelector('#getBtn')
    const postBtn = document.querySelector('#postBtn')
    const putBtn = document.querySelector('#putBtn')
    const deleteBtn = document.querySelector('#deleteBtn')

    // get类型请求
    getBtn.onclick = () => {
        // 1.创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 执行请求头信息（初始化请求）
        xhr.open('get', 'http://localhost:8081/server/1?name=1&age=1', true)
        // 3.发送请求
        xhr.send()
    }
    // post类型请求
    postBtn.onclick = () => {
        // 1.创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 执行请求头信息（初始化请求）
        xhr.open('post', 'http://localhost:8081/server/1?name=1&age=1', true)
        // 3.发送请求
        xhr.send()
    }
    // put类型请求
    putBtn.onclick = () => {
        // 1.创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 执行请求头信息（初始化请求）
        xhr.open('put', 'http://localhost:8081/server/1?name=1&age=1', true)
        // 3.发送请求
        xhr.send()
    }
    // delete类型请求
    deleteBtn.onclick = () => {
        // 1.创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 执行请求头信息（初始化请求）
        xhr.open('delete', 'http://localhost:8081/server/1?name=1&age=1', true)
        // 3.发送请求
        xhr.send()
    }


</script>

</html>